<template>
  <basic-container>
    <div>
      <el-page-header :icon="ArrowLeft" content="签署任务概要" @back="proxy.$router.push('/evidence')"/>

      <div class="main" v-if="isShow">
        <div class="task">
          <div>签署任务概要</div>
          <table class="task_box">
            <tr align="left">
              <td>编号：{{sealDetail.sealSign.signId}}</td>
              <td>名称：{{sealDetail.sealSign.signName}}</td>
            </tr>
            <tr align="left">
              <td>任务发起人：{{sealDetail.sealSign.signSponsor}}</td>
              <td>是否使用防伪电子印章签署：是</td>
            </tr>
            <tr align="left">
              <td>任务开始时间：{{sealDetail.sealSign.signStartTime}}</td>
              <td>任务结束时间：{{sealDetail.sealSign.signEndTime}}</td>
            </tr>
          </table>
        </div>

        <div class="task">
          <div>签署任务完成信息</div>
          <table class="task_box">
            <tr align="left">
              <td colspan="3">签署文件名称：{{sealDetail.sealSign.signFileName}}</td>
              <td colspan="3">签署合同：
                <el-link :underline="false" type="primary" @click="downloadPDF" style="font-size: 12px;margin-top: -4px">点击下载</el-link>
              </td>
            </tr>
            <tr align="left" v-for="item in sealSigner">
              <td colspan="2">签署方：{{item.signerRole}}</td>
              <td colspan="2">签署人：{{item.signerId}}</td>
              <td colspan="2">签署时间：{{dateFormat("YYYY-mm-dd HH:MM:SS",new Date(item.signerSignTime))}}</td>
            </tr>
          </table>
        </div>
      </div>
      <div class="main-btn">
<!--        <el-button type="primary" size="large">电子版出证</el-button>-->
<!--        <el-button type="primary" size="large" style="margin-left: 20px">纸质版出证</el-button>-->
      </div>
    </div>
  </basic-container>
</template>

<script setup>
import {ref,getCurrentInstance} from 'vue';
import {getAntiFakeDetailApi} from '../../../api/sealAntiFake';
import {ElMessage} from 'element-plus';
import {dateFormat} from '../../../utils/util';
import {validatenull} from '../../../utils/validate';
import { ArrowLeft } from '@element-plus/icons-vue'
const {proxy} = getCurrentInstance()

//接收传过来的路由信息
const antiFakeSealId = proxy.$route.query.antiFakeSealId

const sealDetail = ref({})
const isShow = ref(false)

// 签署人数组
const sealSigner = ref([])

const getAntiFakeDetail = () => {
  getAntiFakeDetailApi(antiFakeSealId,1)
      .then(res=>{
        let data = res.data.result
        console.log(data)
        sealSigner.value = data.sealSigner
        data.antiFakeTime = dateFormat("YYYY-mm-dd HH:MM:SS",new Date(data.antiFakeTime))
        data.sealSign.signStartTime = dateFormat("YYYY-mm-dd HH:MM:SS",new Date(data.sealSign.signStartTime))
        data.sealSign.signEndTime = dateFormat("YYYY-mm-dd HH:MM:SS",new Date(data.sealSign.signEndTime))
        data.sealSign.signSignTime = dateFormat("YYYY-mm-dd HH:MM:SS",new Date(data.sealSign.signSignTime))
        sealDetail.value = data
        isShow.value = true
      }).catch(res=>{
    ElMessage.error(res)
  })
}
getAntiFakeDetail()


/**
 * 下载pdf到本地
 */
const downloadPDF = () => {
  //通过阿里云oss提供的下载接口获取下载地址
  let filename = sealDetail.value.sealSign.signFilePath.split(".com/")[1]
  const response = {
    'content-disposition': `attachment; filename=${encodeURIComponent(filename)}`
  }
  const url = proxy.$OSS.signatureUrl(filename, { response });

  try {
    let elemIF = document.createElement("iframe");
    elemIF.src = url;
    elemIF.style.display = "none";
    document.body.appendChild(elemIF);
  } catch (e) {
    alert("下载异常！");
  }
}
</script>

<style scoped>
/deep/ .el-card__body {
  margin: 10px 20px;
}

.main{
  width: 100%;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  padding: 50px 100px 20px 100px;
  border-bottom: 1px solid #eee;
}

.task{
  width: 900px;
  border: 1px solid #eee;
  padding: 20px;
  font-size: 12px;
  margin-bottom: 30px;
}

.task_box{
  table-layout:fixed;
  width: 900px;
  border-left: 1px solid #eee;
  border-top: 1px solid #eee;
  margin-top: 15px
}

.task_box tr td{
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  width: 50%;
  padding: 10px 18px;
  border-right: 1px solid #eee;
  border-bottom: 1px solid #eee;
}
.main-btn{
  text-align: center;
  margin-top: 20px;
}
/deep/ .el-button--primary{
  background-color: #1063f1;
  border-color: #1063f1;
}
/deep/ .el-button--primary:hover{
  opacity: 0.8;
}
</style>
